import './main.scss'
import { defineComponent } from 'vue'
import { useExpose } from '@renderer/utils'

export default defineComponent({
  name: 'Drawer',
  props: {
    state: {
      type: Object,
      default: () => ({
        title: '标题',
        width: '30%',
        direction: 'rtl',
        visible: false,
        footerVisible: true
      })
    }
  },
  emit:['closed'],
  setup(props, { emit, slots }) {
    const { state } = props
    // 渲染标题
    const renderHeader = () => {
      return <>{slots.header?.() || <div class="title">{state.title}</div>}</>
    }
    // 渲染内容
    const renderDefault = () => {
      return <>{slots.default?.()}</>
    }
    // 渲染底部按钮
    const renderFooter = () => {
      return (
        <>
          {state.footerVisible
            ? slots.footer?.() || (
                <div style={{ textAlign: state.footer[2] }}>
                  <el-button onClick={onCancel}>{state.footer[0]}</el-button>
                  <el-button type="primary" onClick={onConfirm}>
                    {state.footer[1]}
                  </el-button>
                </div>
              )
            : ''}
        </>
      )
    }
    const onClosed =  () => {
      emit('closed')
    }
    const onCancel = () => {}
    const onConfirm = () => {}
    useExpose({})
    return () => (
      <el-drawer
        v-model={state.visible}
        direction={state.direction}
        size={state.width}
        vSlots={{
          header: () => renderHeader(),
          footer: () => renderFooter(),
          default: () => renderDefault()
        }}
      />
    )
  }
})
